<script >

import title1 from "../components/title.vue";
import Navigation from "../components/navigation_tea.vue";
import dark from "../components/dark.vue";
import {Monitor} from "@element-plus/icons-vue";


export default{
  name: 'setting',
  components:{
    Monitor,
    title1,
    Navigation,
    dark
  },
  data(){
    return{
      isDarkTheme: false // 主题状态
    }
  },
  methods:
      {
        toggleTheme() {
          this.isDarkTheme = !this.isDarkTheme;
          if (this.isDarkTheme) {
            document.body.classList.add('dark-theme');
            localStorage.setItem('theme', 'dark');

          } else {
            document.body.classList.remove('dark-theme');
            localStorage.setItem('theme', 'light');

          }

        },

      },
  mounted() {
    document.title = '教师信息教务系统';
    const token = localStorage.getItem('token'); // 确保 token 已正确存储
    const userNo = sessionStorage.getItem('UserNo'); // 确保 UserNo 已正确存储
    if (!token || !userNo) {
      alert('缺少必要的认证信息，请重新登录。');
      this.$router.push({ name: "Login" });
    }
  },
  // 已经改到在app.vue中的生命周期函数中，方便在开始登录的时候就成功更改主题。
  // mounted() {
  //   // 加载主题偏好
  //   const theme = localStorage.getItem('theme');
  //   if (theme === 'dark') {
  //     this.isDarkTheme = true;
  //     document.body.classList.add('dark-theme');
  //     const html = document.querySelector('html')
  //     if (html) {
  //       html.classList.add('dark')
  //       html.classList.remove('light')
  //     }
  //   }
  // }
}
</script>

<template class="dark">
  <text class="sub-title"> — 系统界面设置</text>
  <title1></title1>
  <Navigation></Navigation>
  <el-row :gutter="20">
    <el-col :span="6">

      <el-card class="ThemeSet">
        <template #header>
          <div class="card-header">
              <span>
                <el-icon><Monitor /></el-icon>  主题切换
              </span>
          </div>
        </template>
        <!-- <el-button  @click="toggleTheme" size="samll">
        </el-button> -->
        <dark ></dark>
      </el-card>
    </el-col>

  </el-row>
</template>

<style scoped>
.sub-title{
  z-index: 2;
  position: fixed;
  top: 35px;
  left: 380px;
  color: #0e4bbd;
  font-size: 30px;
  font-weight: normal;
}
.ThemeSet{
  position: fixed;
  top: 100px;
  left: 250px;
  width:80%;
}

</style>